/*
 * @Author: mayijun
 * @Date: 2022-05-14 11:12:52
 * @LastEditors: mayijun
 * @LastEditTime: 2022-06-21 10:16:04
 */
//维度组件
import { defineComponent, reactive } from 'vue';
import './index.scss';
import { RemoveFilled } from '@element-plus/icons-vue';
import { ElIcon } from 'element-plus';

const DimensionTag = defineComponent({
  name: 'DimensionTag',
  components: { RemoveFilled },
  props: {
    itemData: {
      type: Object,
      default: null
    },
    index: {
      type: Number,
      default: -1
    },
  },
  emits: ['removeItem'],
  setup: (props, { slots, attrs, emit }) => {
    let state = reactive({
      groupDrawer: false,
      arithmeticList: [] as any,
      indexItem: {},
      edit: false
    });

    const handleRemove = (data: any, index: number) => {
      emit('removeItem', data.id, index);
    }

    return () => {
      return (
        <div class="dimension-tag-wrap">
          <span class="title">{props.itemData.cnName}</span>
          <span class="icon-wrap" onClick={() => handleRemove(props.itemData, props.index)}>
            <ElIcon>
              <RemoveFilled />
            </ElIcon>
          </span>
        </div>
      );
    };
  }
});

export default DimensionTag;
